<template>
  <div>
    <el-button
      type="primary"
      size="default"
      icon="ele-Plus"
      @click="showAddSpuForm"
      :disabled="!category3Id"
      >添加spu</el-button
    >
    <el-table :data="spuList" border stripe style="margin: 20px 0px">
      <el-table-column
        label="序号"
        align="center"
        width="80"
        type="index"
      ></el-table-column>
      <el-table-column prop="spuName" label="SPU名称"></el-table-column>
      <el-table-column prop="description" label="SPU描述"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-button
            type="success"
            size="small"
            title="添加sku"
            icon="ele-Plus"
            @click="showAddSkuForm(row)"
          ></el-button>
          <el-button
            type="warning"
            size="small"
            title="修改spu"
            icon="ele-Edit"
            @click="showUpdateSpuForm(row)"
          ></el-button>
          <el-button
            type="info"
            size="small"
            title="查看sku列表"
            icon="ele-InfoFilled"
            @click="showSkuList(row)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="ele-Delete"
            title="删除spu"
            @click="deleteSpu(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="page"
      v-model:page-size="limit"
      :pager-count="9"
      :page-sizes="[3, 5, 7, 10]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @current-change="getSpuList"
      @size-change="handleSizeChange"
    />
  </div>

  <!-- 对话框 -->
  <el-dialog
    v-model="dialogTableVisible"
    :title="`${spu.spuName}名称的sku列表`"
    :before-close="handleClose"
  >
    <el-table v-loading="loading" :data="skuList">
      <el-table-column prop="skuName" label="名称" width="150" />
      <el-table-column prop="price" label="价格" width="200" />
      <el-table-column prop="weight" label="重量" />
      <el-table-column prop="skuDefaultImg" label="默认图片">
        <template v-slot="{ row, $index }">
          <img
            :src="row.skuDefaultImg"
            alt=""
            style="width: 80px; height: 100px"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, watch } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import skuApi from "@/api/sku";
export default defineComponent({
  name: "SpuList",
});
</script>
<script lang="ts" setup>
import { ref } from "vue";
import { useCategoryStore } from "@/stores/category";
import spuApi, { type SpuData } from "@/api/spu";
import type { SkuData } from "@/api/sku";
const page = ref(1);
const limit = ref(3);
const total = ref(40);
const categoryStore = useCategoryStore();
const { category3Id } = storeToRefs(categoryStore);
const spuList = ref<SpuData[]>([]);

// 专门用来发请求获取spu列表的
const getSpuList = async (num: number = 1) => {
  page.value = num;
  try {
    const result = await spuApi.getPageList(
      page.value,
      limit.value,
      category3Id.value as number
    );
    spuList.value = result.records;
    total.value = result.total;
  } catch (error) {
    ElMessage.error("获取spu列表失败");
  }
};
// 修改数量的回调
const handleSizeChange = (size: number) => {
  limit.value = size;
  getSpuList();
};
watch(
  category3Id,
  (newVal, oldVal) => {
    if (newVal !== "") {
      // 发请求
      getSpuList();
    } else {
      // 清空数据
      spuList.value = [];
    }
  },
  { immediate: true }
);

const emits = defineEmits(["changeState"]);

// 添加spu
const showAddSpuForm = () => {
  emits("changeState", 2);
};

// 修改spu
const showUpdateSpuForm = (row: SpuData) => {
  emits("changeState", 2, row);
};

const deleteSpu = async (row: SpuData) => {
  try {
    await spuApi.deleteSpu(row.id as number);
    ElMessage.success("删除spu成功");
    getSpuList();
  } catch (error) {
    ElMessage.error("删除失败");
  }
};

// 添加sku
const showAddSkuForm = async (row: SpuData) => {
  emits("changeState", 3, row);
};

// 查看dialog逻辑
const loading = ref(true);
const dialogTableVisible = ref(false);
// 定义dialog表格信息
const spu = ref<SpuData>({
  spuName: "",  
  description: "",
  category3Id: "",
  tmId: "",
  spuSaleAttrList: [],
  spuImageList: [],
});
const skuList = ref<SkuData[]>([]);
const showSkuList = async (row: SpuData) => {
  dialogTableVisible.value = true;
  loading.value = true;
  spu.value = row;
  const { id } = row;
  try {
    // 发起展示dialog请求
    const res = await skuApi.findBySpuId(id as number);
    skuList.value = res;
    console.log(res);
  } catch (error) {
    ElMessage.error("列表获取失败");
  } finally {
    loading.value = false;
  }
};
// 关闭dialog对话框信息
const handleClose = () => {
  dialogTableVisible.value = false;
  loading.value = false;
  skuList.value = [];
};
</script>

<style lang="less" scoped></style>
